/*
 * @Author: fanjs
 * @Date: 2025-04-09 16:41:03
 * @Description:
 */
/*
 * @Author: fanjs
 * @Date: 2025-02-24 15:43:32
 * @Description:
 */
import React from 'react';
import { Card, CardHeader, CardBody, CardFooter, Avatar, Button } from "@heroui/react";
import { SvgIcon } from '@/components/SvgIcon'
import { localStg } from '@/utils/storage';
import { useNavigate } from 'react-router-dom';

interface AccountCardProps {
  account: string | null;
  nickname: string | null;
}
const AccountCard: React.FC<AccountCardProps> = ({ account, nickname }) => {
  const navigate = useNavigate()
  const logout = () => {
    localStg.remove('token');
    localStg.remove('user');
    localStg.remove('email_id');
    localStg.remove('email_sender');
    navigate('/login', { replace: true })
  };

  const resetEmail = () => {
    navigate('/distribute', { replace: true })
  }

  return (
    <Card className="max-w-[340px] border-none bg-transparent" shadow="none">
      <CardHeader className="justify-between">
        <div className="flex gap-5">
          <Avatar
            isBordered
            radius="full"
            size="md"
            src="/src/assets/images/logo.png"
          />
          <div className="flex flex-col gap-1 items-start justify-center">
            <h4 className="text-small font-semibold leading-none text-default-800">{nickname}</h4>
            <h5 className="text-small tracking-tight text-default-800">{account}</h5>
          </div>
        </div>
        <Button
          size="sm"
          variant="flat"
          onPress={logout}
        >
          <SvgIcon icon="line-md:logout" className='text-md' />
          退出登录
        </Button>
      </CardHeader>

      <CardBody className="px-3 py-0 text-small text-default-600">
        <p>如遇账号发送超限问题需要更换发件邮箱，点击下方更换邮箱按钮，去重新选择邮箱配置!</p>
      </CardBody>
      <CardFooter className="gap-3 flex-wrap">
        <div className="flex gap-1">
          <p className="text-default-600 text-small">当前邮箱：</p>
          <p className="font-semibold text-success-600 text-small">「{localStg.get('email_sender') || '未连接'}」</p>
        </div>
        {/* <div className="flex gap-1">
          <p className="font-semibold text-danger-600 text-small">0</p>
          <p className="text-default-600 text-small">发送失败</p>
        </div> */}
        <div className='w-full'>
          <Button
            size="sm"
            className='w-full'
            variant="flat"
            onPress={resetEmail}
            color="secondary"
          >
            更换邮箱
          </Button>
        </div>
      </CardFooter>
    </Card>
  );
}


export default AccountCard;
